<template>
  <view class="container">
    <!-- 装饰性背景 -->
    <view class="decorative-bg">
      <view class="gradient-circle pink"></view>
      <view class="gradient-circle blue"></view>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <text class="title">欢迎注册</text>
      
      <!-- 表单项 -->
      <view class="input-group">
        <view class="input-item" :class="{ 'input-error': errors.username }">
          <uni-icons type="person" size="20" color="#999" class="input-icon"></uni-icons>
          <input 
            v-model="formData.username"
            placeholder="用户名"
            placeholder-class="placeholder"
            @focus="animateLabel('username')"
            @blur="validateField('username')"
          />
        </view>
        
        <view class="input-item" :class="{ 'input-error': errors.password }">
          <uni-icons type="locked" size="20" color="#999" class="input-icon"></uni-icons>
          <input
            type="password"
            v-model="formData.password"
            placeholder="密码"
            placeholder-class="placeholder"
            @focus="animateLabel('password')"
            @blur="validateField('password')"
          />
        </view>

        <view class="input-item" :class="{ 'input-error': errors.confirmPassword }">
          <uni-icons type="locked" size="20" color="#999" class="input-icon"></uni-icons>
          <input
            type="password"
            v-model="formData.confirmPassword"
            placeholder="确认密码"
            placeholder-class="placeholder"
            @focus="animateLabel('confirmPassword')"
            @blur="validateConfirmPassword"
          />
        </view>
      </view>

      <!-- 错误提示 -->
      <view class="error-box" v-if="Object.values(errors).some(msg => msg)">
        <uni-icons type="info" size="16" color="#ff4d4f"></uni-icons>
        <text class="error-text">{{ Object.values(errors).find(msg => msg) }}</text>
      </view>

      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :class="{ 'btn-loading': isSubmitting }"
        @click="handleRegister"
        hover-class="btn-hover"
      >
        <text v-if="!isSubmitting">立即注册</text>
        <uni-icons v-else type="spinner-cycle" size="20" class="loading-icon"></uni-icons>
      </button>

      <!-- 底部链接 -->
      <view class="footer-links">
        <text @click="navigateToLogin">已有账号？立即登录</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { http } from '../../../utils/requestUtil'
const animateLabel = (e)=>{
	console.log(e)
}
// 响应式数据
const formData = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const errors = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const isSubmitting = ref(false)

// 验证规则
const validationRules = {
  username: value => {
    if (!value) return '用户名不能为空'
    if (value.length < 2) return '用户名至少2个字符'
	 if (value.length > 20) return '用户名最多20位'
    return ''
  },
  password: value => {
    if (!value) return '密码不能为空'
    if (value.length < 5) return '密码至少5位'
    if (value.length > 20) return '密码最多20位'
    return ''
  }
}

// 字段验证
const validateField = (field) => {
  errors[field] = validationRules[field](formData[field])
}
const navigateToLogin = ()=>{
	uni.navigateBack()
}
// 确认密码验证
const validateConfirmPassword = () => {
  errors.confirmPassword = 
    formData.password !== formData.confirmPassword ? '两次输入密码不一致' : ''
}

// 注册提交
const handleRegister = async () => {
  // 前置验证
  validateField('username')
  validateField('password')
  validateConfirmPassword()

  if (Object.values(errors).some(msg => msg)) return
  try {
    isSubmitting.value = true
    const res = await http.post('/register',{
        username: formData.username,
        password: formData.password,
        confirmPassword: formData.confirmPassword
      }
    )
    if (res.code === 200) {
		console.log(JSON.stringify(res))
      uni.showToast({ title: '注册成功', icon: 'success' })
      setTimeout(() => uni.navigateBack(), 1500)
    } else {
      throw new Error(res.msg || '注册失败')
    }
  } catch (error) {
    uni.showToast({
      title: error.msg || '网络异常，请稍后重试',
      icon: 'none'
    })
  } finally {
    isSubmitting.value = false
  }
}
</script>
<style>
	.container {
	  height: 100vh;
	  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	  position: relative;
	  overflow: hidden;
	}
	
	.container .decorative-bg .gradient-circle {
	  width: 600rpx;
	  height: 600rpx;
	  border-radius: 50%;
	  position: absolute;
	  filter: blur(80rpx);
	  opacity: 0.3;
	}
	
	.container .decorative-bg .gradient-circle.pink {
	  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
	  left: -20%;
	  top: -10%;
	}
	
	.container .decorative-bg .gradient-circle.blue {
	  background: linear-gradient(45deg, #4facfe, #00f2fe);
	  right: -20%;
	  bottom: -10%;
	}
	
	.form-container {
	  position: relative;
	  z-index: 2;
	  margin: 120rpx 60rpx 0;
	  padding: 60rpx 40rpx;
	  background: rgba(255, 255, 255, 0.95);
	  border-radius: 40rpx;
	  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	  backdrop-filter: blur(20rpx);
	}
	
	.form-container .title {
	  display: block;
	  text-align: center;
	  font-size: 44rpx;
	  font-weight: 600;
	  color: #2c3e50;
	  margin-bottom: 80rpx;
	  letter-spacing: 2rpx;
	}
	
	.input-group {
	  margin-bottom: 60rpx;
	}
	
	.input-item {
	  height: 100rpx;
	  margin-bottom: 40rpx;
	  background: #f8f9fa;
	  border-radius: 16rpx;
	  display: flex;
	  align-items: center;
	  padding: 0 30rpx;
	  transition: all 0.3s;
	  border: 2rpx solid transparent;
	}
	
	.input-item.input-error {
	  border-color: #ff4d4f;
	  animation: shake 0.4s;
	}
	
	.input-item .input-icon {
	  margin-right: 20rpx;
	}
	
	.input-item input {
	  flex: 1;
	  height: 100%;
	  font-size: 30rpx;
	  color: #2c3e50;
	}
	
	.input-item .placeholder {
	  color: #a4b0be;
	}
	
	.error-box {
	  display: flex;
	  align-items: center;
	  padding: 20rpx;
	  background: #fff2f2;
	  border-radius: 12rpx;
	  margin-bottom: 40rpx;
	}
	
	.error-box .error-text {
	  color: #ff4d4f;
	  font-size: 26rpx;
	  margin-left: 10rpx;
	}
	
	.submit-btn {
	  height: 100rpx;
	  line-height: 100rpx;
	  background: linear-gradient(45deg, #4facfe, #00f2fe);
	  color: white;
	  border-radius: 16rpx;
	  font-size: 34rpx;
	  font-weight: 500;
	  letter-spacing: 2rpx;
	  transition: all 0.3s;
	  box-shadow: 0 10rpx 30rpx rgba(79, 172, 254, 0.3);
	}
	
	.submit-btn.btn-loading {
	  opacity: 0.9;
	}
	
	.submit-btn .loading-icon {
	  animation: rotate 1s linear infinite;
	}
	
	.submit-btn.btn-hover {
	  transform: translateY(-4rpx);
	  box-shadow: 0 15rpx 40rpx rgba(79, 172, 254, 0.4);
	}
	
	.footer-links {
	  margin-top: 60rpx;
	  text-align: center;
	  font-size: 28rpx;
	  color: #a4b0be;
	}
	
	.footer-links a {
	  color: #4facfe;
	}
	
	.footer-links a:active {
	  opacity: 0.8;
	}
	
	@keyframes rotate {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	
	@keyframes shake {
	  0%,
	  100% {
	    transform: translateX(0);
	  }
	  25% {
	    transform: translateX(-10rpx);
	  }
	  75% {
	    transform: translateX(10rpx);
	  }
	}
</style>